<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>HeatmapComponent demo 2</title>
  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
  <link rel="stylesheet" type="text/css" href="../build/heatmap-component.css" />
  <script src="../build/heatmap-component.js"></script>
</head>

<body>
  <div style="width: 1000px; max-width: 95%; min-width: 400px; margin-inline: auto; margin-top: 20px;">
    <!-- Your visualization will be placed here -->
    <div id="app" style="width: 100%; height: 300px; border: solid gainsboro 1px;">
    </div>

    <p>Use scroll to zoom, Shift+scroll (or horizontal scroll) to pan.</p>
    <p><a href="../src/heatmap-component/demo.ts">Source code</a></p>
    <div style="height: 100vh;"></div>
  </div>

  <script>
    HeatmapComponent.demos.demo2('app');
  </script>
</body>

</html>